<template>
  <div class="team-wrapper h-full mx-auto">
    <div class="back-wrap pb-4 pt-4">
      <span class="text-[#736B7D]" @click="back">&lt;Dashboard</span>
    </div>
    <v-table theme="light">
      <thead>
        <tr>
          <th v-for="(item, idx) in headers" :key="idx" class="text-left">
            {{ item.text }}
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in tableData" :key="item.name">
          <td>{{ item.no }}</td>
          <td>{{ splitAddress(item.address) }}</td>
          <td>
            <div class="flex align-center">
              <v-avatar :size="32">
                <v-img
                  :src="`/src/assets/images/avatars/${item.avatar}.png`"
                ></v-img>
              </v-avatar>
              <div class="ml-2">
                <p style="color: #736b7d; font-weight: 700">{{ item.name }}</p>
                <!-- <p style="color: #736B7D;">{{item.name2}}</p> -->
              </div>
            </div>
          </td>
          <td>
            <div class="flex align-center">
              <v-avatar :size="32">
                <v-img
                  :src="`/src/assets/images/avatars/${item.avatar}.png`"
                ></v-img>
              </v-avatar>
              <div class="ml-2">
                <p style="color: #736b7d; font-weight: 700">
                  {{ splitEmail(item.email, 'start') }}
                </p>
                <p style="color: #736b7d">
                  {{ splitEmail(item.email, 'end') }}
                </p>
              </div>
            </div>
          </td>
          <td>{{ item.team }}</td>
          <td>{{ item.sdao }}</td>
          <td>
            <v-chip :color="statusColor[item.status]">
              {{ status[item.status] }}
            </v-chip>
          </td>
        </tr>
      </tbody>
    </v-table>
    <div v-if="tableData.length" class="pagination-wrap flex justify-end">
    <v-pagination
      v-model="pageNumber"
      :length="pages"
      :total-visible="1"
    ></v-pagination>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, toRefs, watch } from 'vue';
import { useRouter } from 'vue-router';
import { getTeamList } from '@/api/dashboard';
import { generateTokenApi } from '@/api/system/user';
import useWalletHook from '@/hooks/Wallet';
import UserStore from '@/store/UserStore';
import storage from '@/utils/storage';
import useContractHook from '@/hooks/Contract';

let router = useRouter();
const userStore = UserStore();

const { startPolling } = useContractHook();

let state = reactive({
  tableData: [
    // {
    //   no: 1,
    //   address: 'Oxusdjhfdgdjhgdjfgbdjhb49fd',
    //   avatar: '1',
    //   name: 'Frozen Yogurt',
    //   email: '157684883434@163.com',
    //   team: 20,
    //   sdao: 20,
    //   status: 0,
    // },
  ],
  total: 1,
  pages: 0,
  pageNumber: 1,
  pageSize: 10,
});

const headers = [
  { text: 'No.', value: 'no' },
  { text: '地址', value: 'address' },
  { text: 'DISCORD', value: 'discord' },
  { text: 'TELEGRAM', value: 'telegram' },
  { text: '团队', value: 'team' },
  { text: 'SDAO', value: 'sdao' },
  { text: '状态', value: 'status' },
];

const statusColor = ['#8B8D92', '#57C900'];

const status = ['Inactive', 'Active'];

let splitAddress = (str: string): string => {
  if (!str.length) return '--';
  return `${str.slice(0, 5)}...${str.slice(-4)}`;
};
let splitEmail = (str: string, type: string): string => {
  if (!str.length) return '--';
  let [start, end] = str.split('@');
  if (type === 'start') return start;
  return `@${end}`;
};
let random1_8 = () => {
  return parseInt(Math.random() * (8 - 1) + 1);
};

let getData = async () => {
  let {pageNumber, pageSize} = state
  getTeamList({pageNumber, pageSize}).then((data) => {
    let { total, child } = data;
    state.total = total
    state.pages = Math.ceil(total / state.pageSize)
    state.tableData = child.map(
      ({ shareCode, dcName, tgName, teamNumber, sdaoAmount, state }) => {
        return {
          address: shareCode,
          avatar: random1_8(),
          name: dcName,
          email: tgName,
          team: teamNumber,
          sdao: sdaoAmount,
          status: state,
        };
      }
    );
  });
};

onMounted(() => {
  if(userStore.token) getData();
});


watch( () => userStore.token, () => {
  getData()
})


let { tableData, total, pageNumber, pageSize, pages } = toRefs(state);

let back = () => {
  router.go(-1);
};
</script>

<style lang="scss" scoped>
.team-wrapper {
  @apply relative flex flex-col p-5 xs:px-6 sm:px-20 md:px-10 lg:px-[108px] xl:px-[228px] bg-[#F4F5FA];
  .back-wrap {
    span {
      cursor: pointer;
    }
  }
}
</style>